<template>
  <div class="artCate-wrapper">
    <el-main class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix card-header">
          <span style="font-size: 14px">文章列表</span>
        </div>
        <!-- 顶部筛选与新增栏 -->
        <div class="top-bar">
          <el-form :inline="true" :model="filterForm" class="filter-bar">
            <el-form-item label="文章分类">
              <!-- 渲染文章分类 -->
              <el-select
                v-model="filterForm.cate_id"
                size="small"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in artCateTable"
                  :key="item.id"
                  :label="item.cate_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布状态">
              <el-select
                v-model="filterForm.state"
                size="small"
                placeholder="请选择状态"
              >
                <el-option label="已发布" value="已发布"></el-option>
                <el-option label="草稿" value="草稿"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="query"
                >筛选</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="info" size="small" @click="reset"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-button
            class="addArt"
            type="primary"
            size="small"
            @click="addShow = true"
            >发表文章</el-button
          >
        </div>
        <!-- 文章列表表格 -->
        <el-table
          ref="listTable"
          class="listTable"
          :data="artListTable"
          stripe
          border
          :header-cell-style="{ fontSize: '12px', color: '#000' }"
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="文章标题"
            min-width="80"
            class="art-title"
          >
            <template slot-scope="{ row }">
              <el-link type="primary" @click="openDetail(row)">{{
                row.title
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="cate_name" label="分类" min-width="80">
          </el-table-column>
          <el-table-column prop="pub_date" label="发表时间" min-width="80">
            <template>
              <div>{{ artListTable.pub_date | timeFormat }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" min-width="80">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button size="mini" type="danger" @click="delArticle(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </el-main>
    <!-- 添加文章分类弹窗 -->
    <AddArticleDialog
      :addDialogVisible.sync="addShow"
      :cateTable="artCateTable"
      @updateData="getArtList"
    ></AddArticleDialog>

    <!-- 文章详情弹窗 -->
    <ArticleDetail
      ref="articleDetailRef"
      :detailDialogVisible.sync="detailShow"
      :artRow="copyRow"
    ></ArticleDetail>
  </div>
</template>

<script>
import AddArticleDialog from "@/views/artList/components/AddArticleDialog";
import ArticleDetail from "@/views/artList/components/ArticleDetail";
import { getArtListApi, delArticleApi } from "@/api/article";
import { getCateListApi } from "@/api/cate";
export default {
  name: "artList",
  components: { AddArticleDialog, ArticleDetail },
  data() {
    return {
      // 顶部筛选栏
      filterForm: {
        cate_id: "",
        state: "",
      },
      // 文章列表表格
      artListTable: [],
      // 当前页---页码值
      pagenum: 1,
      // 页容量---每页显示多少条数据
      pagesize: 5,
      // 数据总条数
      total: 0,
      // 文章分类数组
      artCateTable: [],

      // 发表文章弹窗
      addShow: false,
      // 文章详情弹窗
      detailShow: false,
      // 拷贝row --- 文章详情
      copyRow: {
        id: "", // 文章 Id
        title: "", //	string	标题
        pub_date: "", //,	string	发表时间
        state: "", // string	状态
        cate_name: "", //	string	所属分类名称
      },
    };
  },
  created() {
    this.getCateList();
    this.getArtList();
  },
  mounted() {},
  methods: {
    // 查询按钮的回调
    query() {
      this.getArtList();
    },
    // 重置按钮的回调
    reset() {
      this.filterForm = {
        cate_id: "",
        state: "",
      };
      // 重置当前页---页码值
      this.pagenum = 1;
      // 重置也容量
      this.pagesize = 5;
      this.getArtList();
    },
    // 获取文章列表数据
    async getArtList() {
      const res = await getArtListApi({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        cate_id: this.filterForm.cate_id,
        state: this.filterForm.state,
      });
      if (res.data.code === 0) {
        console.log("getArtList---", res);
        this.artListTable = res.data.data;
        console.log("getArtList---artListTable", this.artListTable);
        this.total = res.data.total;
      } else {
        this.$message.error("未能获取文章列表");
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getArtList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.getArtList();
    },
    // 获取文章分类列表
    async getCateList() {
      const res = await getCateListApi();
      if (res.data.code === 0) {
        this.artCateTable = res.data.data;
        // this.filterForm = res.data.data
      } else {
        this.$message.error("获取分类数据失败");
      }
    },
    // 打开文章详情
    openDetail(row) {
      this.detailShow = true;
      console.log("openDetail---row", row);
      this.copyRow = JSON.parse(JSON.stringify(row));
      console.log("openDetail---copyRow", this.copyRow);
      // this.$refs.articleDetailRef.detailArticle();
    },
    // 删除文章的回调
    delArticle(id) {
      console.log("delArticle", id);
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delArticleApi({ id });
          if (res.data.code === 0) {
            if ((this.total - 1) % this.pagesize == 0 && this.total > 1) {
              this.pagenum = this.pagenum - 1;
            }
            this.getArtList();
            this.$message({
              type: "success",
              message: "删除文章成功！",
            });
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-bottom: 20px;
  // .card-header {
  //   span {
  //     line-height: 32px;
  //   }
  // }
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.listTable {
  font-size: 12px !important;
}
::v-deep .el-pagination {
  margin-top: 15px;
  margin-bottom: 20px;
}
</style>